<template>
    <div class="background">
    <div class="login_warp">
      <div class="first_part">
        <div class="title">Forgot Password</div>
      </div>
      <div class="second_part">
        <el-form ref="emailInfoRef" :model="forgetInfo" label-position="top" :rules="emailRules" label-width="100px">
          <el-form-item label="Email" prop="email">
            <el-input v-model="forgetInfo.email">
            </el-input>
          </el-form-item>
        </el-form>
        <el-form ref="forgetFormRef" :model="forgetInfo" label-position="top" :rules="formRules" label-width="100px">
          <el-form-item label="Verification Code" prop="code">
            <el-input v-model="forgetInfo.code" class="code-input">
              <el-button slot="append" class="code-btn" @click="getVerifyCode" v-show="show">Send</el-button>
              <el-button slot="append" class="code-btn" disabled @click="getVerifyCode" v-show="!show">Send({{count}}s)</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="Password" prop="pwd">
            <el-input v-model="forgetInfo.pwd"
                      show-password>
            </el-input>
          </el-form-item>
          <el-form-item label="Confirm password" prop="cfmPwd">
            <el-input v-model="forgetInfo.cfmPwd"
                      show-password>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="second-button">
          <el-button @click="CancelClick">Cancel</el-button>
          <el-button type="primary" @click="SaveClick">Submit</el-button>
        </div>
      </div>
    </div>
    <div id="circle1"></div>
    <div id="circle2"></div>
    <div id="circle3"></div>
    <div id="circle4"></div>
    <div id="circle5"></div>
  </div>
</template>

<script>
export default {
  name: 'Forget',
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('Email is required'));
      } else {
        const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-zd]{2,5}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('Please enter the correct email'));
        }
      }
    };
    let validCode = (rule, value, callback) => {
      if (!value){
        return callback(new Error('Please enter the Verification Code'))
      } else {
        callback()
      }
    }
    let validPassword = (rule, value, callback) => {
      if (!value){
        return callback(new Error('Password is required'))
      } else {
        callback()
      }
    };
    let validCfmPassword=(rule,value,callback)=>{
      if (!value){
        return callback(new Error('Password is required'))
      } else if (value !== this.forgetInfo.pwd) {
          return callback(new Error('The contents are inconsistent'))
      } else {
          callback()
      }
    };
    return {
      show: true,
      count: null,
      forgetInfo: {
        email: '',
        code: '',
        pwd: '',
        cfmPwd: '',
      },
      emailRules: {
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ],
      },
      formRules: {
        code: [
          { validator: validCode, trigger: 'blur' }
        ],
        pwd: [
          // { required: true, message: 'Please enter your password', trigger: ['blur'] },
          { validator: validPassword, trigger: 'blur' }
        ],
        cfmPwd: [
          { validator: validCfmPassword, trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    getVerifyCode() {
      const _this = this;
      _this.$refs.emailInfoRef.validate(valid => {
        if(!valid) return;
        _this.$api.login.sendEmail({
          emailaddress: _this.forgetInfo.email,
        }).then(res => {
          if(res.data.code === 2000){
            _this.countTime();
            _this.$message.success("send success");
          } else {
            _this.$message.error(res.data.message);
          }
        }).catch(err => {
          console.log(err);
        })
      })
    },
    CancelClick() {
      const _this = this;
      _this.$router.push('/index');
    },
    countTime() {
      const _this = this;
      _this.show = false;
      const TIME_COUNT = 60;
      if (!_this.timer) {
        _this.count = TIME_COUNT;
        _this.show = false;
        _this.timer = setInterval(() => {
          if (_this.count > 0 && _this.count <= TIME_COUNT) {
            _this.count--;
          } else {
            _this.show = true;
            clearInterval(_this.timer);
            _this.timer = null;
          }
        }, 1000)
      }
    },
    SaveClick() {
      const _this = this;
      _this.$refs.emailInfoRef.validate(valid => {
        if(!valid) return;
        _this.$refs.forgetFormRef.validate(valid => {
          if(!valid) return;
          _this.$api.login.updatePwd({
            emailaddress: _this.forgetInfo.email,
            code: _this.forgetInfo.code,
            password: _this.forgetInfo.pwd,
            repeatpassword: _this.forgetInfo.cfmPwd
          }).then(res => {
            if(res.data.code === 2000){
              _this.$message.success("update success");
              _this.$router.push('/index');
            } else {
            _this.$message.error(res.data.message);
            }
          }).catch(err => {
            console.log(err);
          })
        })
      })
    }
  },
}
</script>

<style lang="less" scoped>
  .background {
    background-color: rgb(243,238,232);
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%
  }

  .login_warp {
    width: 750px;
    height: 550px;
    border: 2px solid rgba(253, 167, 105,0.5);
    border-radius: 5px;
    background-color: rgba(254, 200, 104,0.24);
    position: relative;
    margin: 0 auto;
    margin-top: 5%;
  }

  .first_part {
    width: 100%;
    text-align: center;
    height: 50px;
    margin-top: 40px;
    .title {
      display: inline-flex;
      align-items: center;
      height: 50px;
      font-size: 30px;
      color: #473C33;
    }
  }

  .second_part {
    width: 300px;
    margin: 0 auto;
    margin-top: 10px;
    /deep/ .el-form-item {
      margin-bottom: 5px;
    }
    /deep/ .el-form-item__label {
      padding-bottom: 0px;
    }
  }

  .code-btn {
    width: 120px;
  }

  .code-input{
    /deep/ .el-button {
      margin: 0px;
      border-radius: 0px 5px 5px 0px;
    }
    /deep/ .el-button.is-disabled,
    /deep/ .el-button.is-disabled:hover{
      width: 120px;
      opacity: 0.8;
      color: inherit;
      border-color: transparent;
      background-color: transparent;
    }
    /deep/ .el-input-group__append {
      width: 120px;
      padding: 0px;
    }
  }

  .forget {
    float: right;
    color: #409EFF;
  }

  .second-button {
    width: 300px;
    margin: 0 auto;
    margin-top: 25px;
    text-align: center;
    /deep/ .el-button {
      width: 140px;
      height: 40px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  #circle1 {
    border-width: 1px;
    position: absolute;
    left: -88px;
    top: -50px;
    width: 260px;
    height: 260px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle2 {
    border-width: 1px;
    position: absolute;
    left: 130px;
    top: 0px;
    width: 80px;
    height: 80px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle3 {
    border-width: 1px;
    position: absolute;
    left: 1100px;
    top: 110px;
    width: 100px;
    height: 100px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle4 {
    border-width: 1px;
    position: absolute;
    left: 300px;
    top: 500px;
    width: 180px;
    height: 180px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.5)
  }

  #circle5 {
    border-width: 1px;
    position: absolute;
    left: 1321px;
    top: 600px;
    width: 140px;
    height: 140px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.5)
  }
</style>
